<template>
  <el-card class="form-container" shadow="never">
    <el-form :model="article" :rules="rules" ref="article">
      <el-form-item label="文章名称" prop="title">
        <el-input v-model="article.title" placeholder="请输入文章名称"></el-input>
      </el-form-item>
      <el-form-item label="描述" prop="description">
        <el-input v-model="article.description" placeholder="请输入文章描述"></el-input>
      </el-form-item>
      <el-form-item label="封面图片" prop="img">
      </el-form-item>
      <el-form-item>
        <ImgClip style="cursor: pointer" :default-poster="imgUrl" @sendChangePoster="sendImgFun"/>
      </el-form-item>
      <el-form-item label="内容">
      </el-form-item>
      <el-form-item>
        <tinymce ref="content" style="min-width: 720px"/>
      </el-form-item>
      <div ref="t" style="width: 100%;display: flex;justify-content: center;flex-direction: row">
        <div>
          <el-button style="margin: 0 auto;width: fit-content" type="primary" @click.prevent.native="handle">提交
          </el-button>
          <el-button style="margin: 0 auto;width: fit-content" type="" @click.prevent.native="reset">重置
          </el-button>
        </div>

      </div>
    </el-form>
  </el-card>
</template>

<script>
import {addArticle} from '@/api/returnArticle'
import tinymce from "@/components/Tinymce"
import ImgClip from "@/components/ImgClip"
import {dataURItoBlob} from "@/utils"

const defaultArticle = {
  adminId: 10000,
  title: '',
  content: '',
  description: '',
  img: ''
}
export default {
  name: "ArticleCateDetail",
  components: {
    ImgClip,
    tinymce
  },
  props: {
    isEdit: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      article: Object.assign({}, defaultArticle),

      rules: {
        title: [
          {required: true, message: '请输入文章名称', trigger: 'blur'},
          {min: 2, max: 140, message: '长度在2到140个字符', trigger: 'blur'}
        ],
        description: [
          {required: true,message:'请输入描述信息',trigger:'change'},
          {min:5,max:140,message:'长度在5到140之间',trigger: 'change'},
          {type:'string',message: '请输入字符串信息',trigger: 'change'}
        ]
      },
      imgUrl: ''


      // toolbar:['undo redo | styleselect | bold italic | link image']
    }
  },
  methods: {
    sendImgFun(base64) {
      if (base64)
        this.article.img = dataURItoBlob(base64.base64)
      this.fileName = base64.fileName
    },
    handle() {
      this.$refs.article.validate(valid => {
        if (valid) {
          this.$confirm('添加文章, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            this.article.content = this.$refs.content.getContent()

            const formData = new FormData();
            if (this.article.img) {
              formData.set("img", this.article.img, this.fileName)
            }
            formData.set("title", this.article.title)
            formData.set("content", this.article.content)
            formData.set("description", this.article.description)
            formData.set("adminId", this.article.adminId)
            debugger
            addArticle(formData).then((resp) => {
              if (resp) {
                this.$message({
                  type: 'success',
                  message: '添加成功!'
                });
              }
            })
          }).catch(() => {
            this.$message({
              type: 'info',
              message: '已取消添加'
            });
          });

        } else {
          console.log('参数不合法!')
          return false
        }
      })
    },
    reset(){
      this.$router.go(0)
    }

  },
  beforeMount() {
    this.article.adminId = this.$store.getters.admin.id;
    this.imgUrl = this.$store.getters.store + "group1/M00/00/00/wKhwgWGGvECAECwcAAAPAKGg43M801.png";
  }
}
</script>

<style scoped>
.form-container {
  width: 80%;
  left: 180px;
}

.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}

.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}

.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}

.avatar {
  width: 300px;
  height: 181px;
  display: block;
}
</style>
